﻿<?
require_once "inc.init.php";
define(GALLERY_PREFIX, "gallery_");

// THE OBJ:
$obj = new proyectos(); // <---- Change this !!!
$obj-> setDbLink($dbLink);

// GETTING:
if ( !$obj->get($_GET[$obj->_dbIndex] ) )
{
    header("Location: index.php");
    die();
}

// MESSENGER
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?= $GLOBALS["website"]["name"] ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['admin']?>/css/bootstrap.css">
    <link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['admin']?>/css/font-awesome.min.css">
    <link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['admin']?>/css/plugin.css">
    <link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['admin']?>/css/font.css" cache="false">
    <link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['admin']?>/css/style.css">
    <script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/prototype-min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <?=jquery()?>
    <?=jqueryui()?>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
    <!--[if lt IE 9]>
        <script src="js/ie/respond.min.js" cache="false"></script>
        <script src="js/ie/html5.js" cache="false"></script>
    <![endif]-->
    <link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/css/jquery.fileupload.css">
    <link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/css/jquery.fileupload-ui.css">
    <noscript><link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/css/jquery.fileupload-noscript.css"></ noscript>
    <noscript><link rel="stylesheet" href="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/css/jquery.fileupload-ui-noscript.css"></noscript>
    <script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/tmpl.min.js"></script>
    <script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/load-image.min.js"></script>
    <script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/canvas-to-blob.min.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.blueimp-gallery.min.js"></script>
    <script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/vendor/jquery.ui.widget.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.iframe-transport.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.fileupload.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.fileupload-process.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.fileupload-image.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.fileupload-audio.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.fileupload-video.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.fileupload-validate.js"></script>
<script src="<?= $GLOBALS['CONF']['url']['js'] ?>/lib/jQuery-File-Upload-9.5.2/js/jquery.fileupload-ui.js"></script>
<style>
.table-striped {
    border: 3px dashed #CCCCCC;
    min-height:80px;
    margin: 0 auto;
    text-align: center;
    text-shadow: 1px 1px 0 #FFFFFF;
    vertical-align: baseline;
}

.table-striped tr
{
    cursor: move !important;
}

.dropfile{
    border: 3px dashed #CCCCCC;
    color:#CCCCCC;
    margin: 0 auto;
    padding:35px;
    text-align: center;
}

.dropfile:hover{
    border: 3px dashed #333;
    color:#333;
    cursor:cell;
}
.container{
    margin-left:0px;
    padding-left:20px;
    width:98%;
}
.fileupload-progress{
    width:300px;
}
.left{
    float:left;
}
.right{
    float:right;
}
.end{
    clear:both;
}
.hidden{
    display:none;
}
#respuesta_estado_orden{
    margin-left:-20px;
}
</style>
</head>
<body>
    <? echo $messenger? $messenger->getMessages() : '';?>
    <section id="content">
        <section class="main padder">
            <div class="row">
                <br>
                <!-- .breadcrumb -->
                <ul class="breadcrumb">
                    <li><a href="."><?= $module->name ?></a></li>
                    <li><a href="abm.php?<?=$obj->_dbIndex."=".$obj->getID()?>"><?= $obj->nombre ?></a></li> 
                    <li class="active">Gallery</li>
                </ul>
                <div class="container">
                    <form id="fileupload" action="" method="POST" enctype="multipart/form-data">
                        <div class="row fileupload-buttonbar" style="margin-bottom:-50px;">
                            <div class="col-lg-7 left">
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Add files...</span>
                                    <input type="file" name="<?=GALLERY_PREFIX?>multiple_file[]" multiple>
                                </span>
                                <button type="submit" class="btn btn-primary start">
                                    <i class="glyphicon glyphicon-upload"></i>
                                    <span>Start upload</span>
                                </button>
                                <button type="reset" class="btn btn-warning cancel">
                                    <i class="glyphicon glyphicon-ban-circle"></i>
                                    <span>Cancel upload</span>
                                </button>
                                <button type="button" class="btn btn-danger delete">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>Delete</span>
                                </button>
                                <input type="checkbox" class="toggle">
                                <!-- The global file processing state -->
                                <span class="fileupload-process"></span>
                            </div>
                            <!-- The global progress state -->
                            <div class="col-lg-5 right fileupload-progress fade">
                                <!-- The global progress bar -->
                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                                </div>
                                <!-- The extended global progress state -->
                                <div class="progress-extended">&nbsp;</div>
                            </div>
                        </div>
                        <div class="end"></div>
                        <div style="clear:both"></div>
                         <!-- The table listing the files available for upload/download -->
                        <div id="respuesta_estado_orden" class="hidden alert fade in">
                            <div class="left">
                                <div id="data_resp_ajax_order"></div>
                            </div>
                            <div class="right">
                                <button class="btn_close_messeger close" data-dismiss="alert" type="button">×</button>
                            </div>
                            <div class="end"></div>
                        </div>
                        <div class="row">
                            <div class="dropfile m-t block"><small>Drag & Drop Files Here!</small></div>
                            <table role="presentation" class="table table-striped" width="100%"><tbody class="files"></tbody></table>
                        </div>
                    </form>
                </div>
                <!--<div class="well m-t">
                    <div class="row">
                        <div class="col-xs-12">
                            <strong>Info de sistema </strong><br>
                            <?= $module->unit ?> id: <?= $obj->getID() ?><br>
                        </div>
                        <div class="col-xs-6">
                            Fecha de creaci&oacute;n : <?= $obj->date_created ?><br>
                            Fecha &uacute;ltimo cambio: <?= $obj->date_modified ?></br>
                        </div>
                        <div class="col-xs-6">
                            Usuario que cre&oacute;: <?= $obj->userCreated ?></br>
                            Usuario que modific&oacute;: <?= $obj->userModified ?></br>
                        </div>
                    </div>
                </div>-->
            </div>
        </section>
    </section>
 <!--FILE UPLOAD JQUERY FILE-->
            <script id="template-upload" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-upload fade" order-photo="{%=file.file_managerID%}">
                    <td>
                        <span class="preview"></span>
                    </td>
                    <td>
                        <p class="name">{%=file.name%}</p>
                        <strong class="error text-danger"></strong>
                    </td>
                    <td>
                        <p class="size">Processing...</p>
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                    </td>
                    <td style="text-align:right;">
                        {% if (!i && !o.options.autoUpload) { %}
                            <button class="btn btn-primary start" disabled>
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Start</span>
                            </button>
                        {% } %}
                        {% if (!i) { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel</span>
                            </button>
                        {% } %}
                    </td>
                </tr>
            {% } %}
            </script>
<script id="template-download" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-download fade" order-photo="{%=file.file_managerID%}">
                    <td width="75px">
                        <span class="preview">
                            {% if (file.thumbnailUrl) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                            {% } %}
                        </span>
                    </td>
                    <td colspan=2>
                        <p class="name">
                            {% if (file.url) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                            {% } else { %}
                                <span>{%=file.name%}</span>
                            {% } %}
                        </p>
                        {% if (file.error) { %}
                            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                        {% } %}
                    </td>
                    <td style="text-align:right;">
                        {% if (file.deleteUrl) { %}
                            <button class="btn btn-danger delete" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                                <i class="glyphicon glyphicon-trash"></i>
                                <span>Delete</span>
                            </button>
                            <input type="checkbox" name="delete" value="1" class="toggle" style="margin-left:10px;margin-right:5px;">
                        {% } else { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel</span>
    <span>Cancel</span>
                            </button>
                        {% } %}
                    </td>
                </tr>
            {% } %}
            </script>
            <!--END FILE UPLOAD-->
<script>
    $j('#fileupload').fileupload({
        disableImageResize: false,
        url: 'ajax.php?action=save_multiple_files&<?=$obj->_dbIndex."=".$obj->getID()?>'
    }).bind('fileuploadadd', function (e, data) { 
        var fileCount = data.files.length; 
        if (fileCount > 0) { 
            $j(".dropfile").hide();
        } 
    });
    
    $j("#fileupload").bind("fileuploadchange", function() {
        parent.resize_iframe("center-iframe", document.body.offsetHeight);
    });
    
    $j('#fileupload').bind('fileuploaddestroy', function (e,res) {
        if($j('.table-striped tr').length==1)$j(".dropfile").show();
        var data = JSON.stringify(res["url"]);
        data = data.replace("new String","");
        data = data.replace("((","");
        data = data.replace("))","");
        data = data.replace("/modules/contents_simple/","");
        data = data.replace("\"","");
        data = data.replace("\"","");
        $j.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: data,
            dataType: 'json'
            //context: $j('#fileupload')[0]
        }).always(function () {
            //$j(this).removeClass('fileupload-processing');
        }).done(function (result) {
            /*$j(this).fileupload('option', 'done').call(this, $j.Event('done'), {result: result});
            if(result) $j(".dropfile").hide();
            else $j(".dropfile").show();*/
            if(result["response"]["total_files"]>0){
                $j(".dropfile").hide();       
            }else{
                $j(".dropfile").show();
            }
        });
    });


    // Load existing files:
    $j('#fileupload').addClass('fileupload-processing');
    function get_result()
    {
        $j.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: "ajax.php?action=get_multiple_files&<?=$obj->_dbIndex."=".$obj->getID()?>",
            dataType: 'json',
            context: $j('#fileupload')[0]
        }).always(function () {
            $j(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $j(this).fileupload('option', 'done').call(this, $j.Event('done'), {result: result});
            if(result) $j(".dropfile").hide();
            else $j(".dropfile").show();
        });
    }
    get_result();
    $j(".table-striped .files").sortable({revert: true, item:"tr",
        update: function(event, ui) {
            var finish_order_photo = "";
            var id_photo = $j(".table-striped .files").sortable("toArray",{attribute: 'order-photo'});
            var i = 0;
            var n = id_photo.length;
            for(i;i<n;i++){
                finish_order_photo += "mySortable[]="+id_photo[i];
                if(i<(n-1)){
                    finish_order_photo += "&";
                }
            }
            $j.ajax({
                type:"POST",
                url: "ajax.php?action=save_order_multiple_files&<?=$obj->_dbIndex."=".$obj->getID()?>",
                data:{newOrderPhoto:finish_order_photo},
                success:function(res){
                    $j("#respuesta_estado_orden").css({"display":"none"});
                    $j("#respuesta_estado_orden").fadeIn("fast");
                    $j("#respuesta_estado_orden").removeClass("hidden");
                    var data = $j.parseJSON(res);
                    if(data["success"]==true){
                        $j("#data_resp_ajax_order").html(data["messages"]);
                        $j("#respuesta_estado_orden").addClass("alert-success");
                    }else{
                        $j("#data_resp_ajax_order").html(data["messages"]);
                        $j("#respuesta_estado_orden").addClass("alert-error");
                    }
                }
            });
            $j("#data_resp_ajax_order").alert();
            //$j("#respuesta_estado_orden").load("ajax.php?action=save_order_multiple_files&<?=$obj->_dbIndex."=".$obj->getID()?>",{newOrderPhoto:finish_order_photo});
        }});
    $j(".table-striped .files").disableSelection();
    $j(".btn_close_messeger").click(function(){
        $j("#respuesta_estado_orden").fadeOut("fast");
    });
    
    $j(document).ajaxSuccess(function() {
        parent.resize_iframe("center-iframe");
    });
    </script>
</body>
</html>
